<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>首页</title>
    <link href="/css/bootstrap@5.3.2/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
     <!-- 导航条 -->
     <nav class="navbar navbar-expand-lg bg-body-tertiary bg-primary" data-bs-theme="dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" aria-current="page" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">新闻</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">咨询</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" data-bs-toggle="modal" data-bs-target="#exampleModal">联系我们</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
     <!-- /导航条 -->
     
     <div class="container mt-1">
        <div class="row">
            <div class="col">
               <!-- 轮播图 --> 
               <div id="carouselExampleIndicators" class="carousel slide">
                <div class="carousel-indicators">
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
                  <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
                </div>
                <div class="carousel-inner">
                  <div class="carousel-item active">
                    <img src="images/p1.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="images/p2.jpg" class="d-block w-100" alt="...">
                  </div>
                  <div class="carousel-item">
                    <img src="images/p3.jpg" class="d-block w-100" alt="...">
                  </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="visually-hidden">Next</span>
                </button>
              </div>
               <!-- /轮播图 -->
            </div>
        </div>
     </div>

     <div class="container mt-2">
         <div class="row" id="productRow">
           <!-- 一个商品信息 -->
            <div class="col-lg-3 col-md-4 col-sm-12"  >               
                <div class="card"">
                    <img src="images/s1.png" class="card-img-top" alt="...">
                    <div class="card-body">
                      <h5 class="card-title">Card title</h5>
                      <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                      <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                
            </div>
             <!-- /一个商品信息 --> 
             <!-- 一个商品信息 -->
            <div class="col-lg-3 col-md-4 col-sm-12"  >
               
              <div class="card"">
                  <img src="images/s1.png" class="card-img-top" alt="...">
                  <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
              </div>
              
          </div>
           <!-- /一个商品信息 --> 
           <!-- 一个商品信息 -->
           <div class="col-lg-3 col-md-4 col-sm-12"  >
               
            <div class="card"">
                <img src="images/s1.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
            
        </div>
         <!-- /一个商品信息 --> 
         <!-- 一个商品信息 -->
         <div class="col-lg-3 col-md-4 col-sm-12"  >
               
          <div class="card"">
              <img src="images/s1.png" class="card-img-top" alt="...">
              <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
              </div>
          </div>
          
      </div>
       <!-- /一个商品信息 --> 
       <!-- 一个商品信息 -->
       <div class="col-lg-3 col-md-4 col-sm-12"  >               
        <div class="card"">
            <img src="images/s1.png" class="card-img-top" alt="...">
            <div class="card-body">
              <h5 class="card-title">Card title</h5>
              <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
              <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>        
      </div>
     <!-- /一个商品信息 --> 
         </div>

     </div>
     <div class="container mt-1">
        <div class="row ">
            <div class="col">
                <!-- 分页组件 -->
                <nav aria-label="Page navigation example ">
                    <ul class="pagination justify-content-center mt-2">
                      <li class="page-item disabled">
                        <a class="page-link"><<</a>
                      </li>
                      <li class="page-item"><a class="page-link" href="#">1</a></li>
                      <li class="page-item"><a class="page-link" href="#">2</a></li>
                      <li class="page-item"><a class="page-link" href="#">3</a></li>
                      <li class="page-item">
                        <a class="page-link" href="#">>></a>
                      </li>
                    </ul>
                  </nav>
                <!-- /分页组件 -->
            </div>
        </div>
     </div>
     
      

<!-- 模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary">Save changes</button>
        </div>
      </div>
    </div>
  </div> 


  <!-- 提示框 -->
     <!-- Then put toasts within -->
    <div class="toast-container p-3 top-50 start-50 translate-middle">
    <div id="myToast" class="toast " role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header"> 
        <strong class="me-auto">Bootstrap</strong>
        <small>just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
     <!-- </div>   -->
  </div>
  <!-- /提示框 -->
    <script src="/js/bootstrap@5.3.2/bootstrap.bundle.min.js"></script>
  </body>
  <script>

     const myToastEl = document.getElementById('myToast');

     let productRow =document.querySelector("#productRow");

     let longitude=1234;
     let latitude=3456;

     fetch(`http://localhost:8088/shop/recommend?longitude=${longitude}&latitude=${latitude}`)
       .then((response) => response.json())
       .then((result) => {  
           //data表示从后台获取的数据
           //console.log(result); 
           let {success,data} = result;
           
           if(success){
             let allItemsDesc="";
             //加载数据
             data.list.forEach((item)=>{
               console.log(item);
               let itemDesc=`
               <div class="col-lg-3 col-md-4 col-sm-12"  >               
                 <div class="card"">
                  <img src="images/s1.png" class="card-img-top" alt="...">
                  <div class="card-body">
                   <h5 class="card-title">${item.name}</h5>
                   <p class="card-text">${item.address}</p>
                   <a href="#" class="btn btn-primary">Go somewhere</a>
                  </div>
                </div>        
               </div>
               `;
               allItemsDesc+=itemDesc;
             });

             console.log(allItemsDesc);
             productRow.innerHTML=allItemsDesc;

           }

            
       }).catch((error)=>{

            setTimeout(()=>{
                console.log("服务器繁忙");            
                const toast = new bootstrap.Toast(myToastEl)
                toast.show();
            },1000)
       });

  </script>
</html>